<template>
  <div :class="['custom-tag', type, size]">
    <slot></slot>
  </div>
</template>
<script setup>
  defineProps({
    type: {
      type: String,
      default: 'warn', // 'warn' | 'primary' | 'default' | 'success' | 'danger'
    },
    size: {
      type: String,
      default: 'medium', // 'small' | 'medium' | 'large'
    },
  })
</script>
<style lang="less" scoped>
  .custom-tag {
    display: inline-block;
    border-radius: 2px;
    font-size: 12px;
  }
  .custom-tag.medium {
    line-height: 20px;
    padding: 0 8px;
  }
  .custom-tag.large {
    line-height: 28px;
    padding: 0 10px;
  }
  .warn {
    background: #fff7e8;
    color: #ff7d00;
  }
  .primary {
    background: #e8f7ff;
    color: #3491fa;
  }
  .default {
    background: #f2f3f5;
    color: #1d2129;
  }
  .success {
    background: #e8ffea;
    color: #00b42a;
  }
  .danger {
    background: #ffece8;
    color: #f53f3f;
  }
</style>
